<template>
  <div class="set-params" @click="$event => $event.stopPropagation()">
    <!--  body  -->
    <div class="description">
      <div class="table-container">
        <!-- 行过滤 -->
        <div>
          <div class="prompt-message">行过滤:</div>
          <div  v-if="selectNode.data.input.length > 0">
            <div v-for="(group, index) in rowsFilter" :key="'group' + index"  class="ranks-filter-group">
              <!-- group box -->
              <div class="group-box">
                <div class="group-box-left">或</div>
                <div class="group-box-center">
                  <div v-for="(item, idx) in group" :key="'item' + idx" class="filter-item">
                    <!--  item box -->
                    <div class="filter-item-box">
                      <a-select v-model="item.fieldName" class="filter-select" size="small">
                        <a-select-option v-for="(column, sort) in allInput" :key="'select' + sort" :value="column">{{column}}</a-select-option>
                      </a-select>
                      <a-select v-model="item.condition" class="filter-select" size="small">
                        <a-select-option :value="'='">等于</a-select-option>
                        <a-select-option :value="'>'">大于</a-select-option>
                        <a-select-option :value="'>='">大于等于</a-select-option>
                        <a-select-option :value="'<'">小于</a-select-option>
                        <a-select-option :value="'<='">小于等于</a-select-option>
                      </a-select>
                      <div class="filter-input-box">
                        <a-input v-model="item.value" class="filter-input" size="small"/>
                      </div>
                      <a-icon-font type="iconzengjia" class="add-delete-icon" @click="addFilterItem(index)"/>
                      <a-icon-font type="icontianjiachengyuan" class="add-delete-icon" @click="deleteFilterItem(index, idx)"/>
                    </div>
                  </div>
                </div>
                <div class="group-box-right">
                  <a-icon-font type="iconicon-beifen5" @click="deleteFilterGroup(index)"/>
                </div>
              </div>
            </div>
            <div class="add-line-filter" @click="addFilterGroup">
              <a-icon type="plus"/>
              添加行过滤
            </div>
          </div>
          <div v-if="selectNode.data.input.length === 0" class="no-father-node">
            -- 请先添加父节点 --
          </div>
        </div>
        <div class="horizontal-divider"></div>
        <!-- 列过滤 -->
        <div>
          <div class="prompt-message">列过滤:</div>
          <div  v-if="selectNode.data.input.length > 0" class="column-filter-input">
            <!-- 全选 -->
            <div class="all-select">
              <span v-if="selectNode.data.input.length > 0">
                 <a-checkbox
                   :checked="allInput.length === columnsFilter.length && allInput.length !== 0"
                   @change="onCheckAllChange($event)"
                 >全选</a-checkbox>
              </span>
            </div>
            <!-- 列 checkbox -->
            <div>
              <span
                v-for="(item2, index2) in allInput"
                :key="index2"
                class="checkbox-label"
              >
               <a-checkbox
                 :checked="columnsFilter.includes(item2)"
                 :value="item2"
                 @change="onChange($event)"
               >
                  <a-tooltip placement="top">
                    <template slot="title">
                      <span>{{item2}}</span>
                    </template>
                    <span class="btn">
                       {{item2}}
                    </span>
                  </a-tooltip>
            </a-checkbox>
            </span>
            </div>

        </div>
        <div v-if="selectNode.data.input.length === 0" class="no-father-node">
          -- 请先添加父节点 --
        </div>
      </div>
    </div>
  </div>
    <!--  footer  -->
    <div class="footer-buttons">
      <div class="btn import-btn" @click="confirm">确定</div>
      <div class="btn cancel-btn" @click="cancelChange">取消</div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
// import {Prop} from 'vue-property-decorator'
import { cloneDeep } from 'lodash'
import DataViewStore from '@/store/modules/dataview'
import {Watch} from 'vue-property-decorator'

interface RowsFilterItem {
  fieldName: string,
  condition: string,
  value: string,
}

@Component
export default class EtlRanksFilter extends Vue {
  // 行过滤
  public rowsFilter: any = []
  // 列过滤
  public columnsFilter: Array<any> = []
  // 所有输入列
  public allInput: Array<string> = []

  private get selectNode() {
    return DataViewStore.selectNode
  }

  // 监听激活的节点
  @Watch('selectNode', {deep: true})
  private changeSelectNode(selectNode: any) {
    if(selectNode) {
      this.initSet()
    }
  }


  public created() {
    this.initSet()
  }

  public initSet() {

    this.allInput = cloneDeep(this.selectNode.data.input[0].tableCols)
    const index = this.allInput.indexOf('_record_id_')
    if (index > -1) {
      this.allInput.splice(index, 1)
    }

    // 配置回显
    if(this.selectNode.data.rowsFilter.length === 0) {
      this.rowsFilter = []
    }else {
      this.rowsFilter = cloneDeep(this.selectNode.data.rowsFilter)
    }
    this.columnsFilter = cloneDeep(this.selectNode.data.columnsFilter)
    const index2 = this.columnsFilter.indexOf('_record_id_')
    if (index2 > -1) {
      this.columnsFilter.splice(index2, 1)
    }
  }

  /**
   * 添加 行过滤 组
   */
  public addFilterGroup() {
    const group: Array<RowsFilterItem> = [
      {
        fieldName: '',
        condition: '>',
        value: '',
      }
    ]
    this.$set(this.rowsFilter, this.rowsFilter.length, group)
  }

  /**
   * 删除 行过滤 组
   */
  public deleteFilterGroup(index: number) {
    this.rowsFilter.splice(index,1)
  }

  /**
   * 添加 行过滤
   */
  public addFilterItem(index: number) {
    if(this.rowsFilter[index].length < 2) {
      const item = {
        fieldName: '',
        condition: '>',
        value: '',
      }
      this.$set(this.rowsFilter[index], 1, item)
    }
  }

  /**
   * 删除 行过滤
   */
  public deleteFilterItem(index: number, idx: number) {
    if(this.rowsFilter[index].length === 2) {
      this.rowsFilter[index].splice(idx,1)
    }
  }

  /**
   * 列过滤 全选
   */
  public onCheckAllChange($event: any) {
    this.columnsFilter =  $event.target.checked ? cloneDeep(this.allInput) : []
  }

  /**
   * 列过滤 改变选中状态
   */
  public onChange($event: any) {
    if($event.target.checked){
      const index =  this.columnsFilter.indexOf($event.target.value)
      if(index < 0) {
        this.columnsFilter.push($event.target.value)
      }
    }else {
      const index =  this.columnsFilter.indexOf($event.target.value)
      if(index > -1) {
        this.columnsFilter.splice(index, 1)
      }
    }
  }

  /**
   * 确认修改
   */
  public confirm() {
    let status = true
    this.rowsFilter.forEach((item: Array<RowsFilterItem>) => {
      item.forEach((item2: RowsFilterItem) => {
        if(item2.fieldName === '' || item2.value === '') {
          status = false
        }
      })
    })
    if(this.columnsFilter.length === 0) {
      status = false
    }
    if (status) {
      const columnsFilter = cloneDeep(this.columnsFilter)
      columnsFilter.push('_record_id_')
      this.$emit('confirm', {rowsFilter: this.rowsFilter, columnsFilter})
    } else {
      this.$message.warning('请检查行过滤条件, 且列过滤不允许为空！')
    }

  }

  /**
   * 取消修改
   */
  public cancelChange() {
    this.initSet()
    this.$emit('cancel')
  }


}
</script>

<style lang="less" scoped>
@import '@/components/studio/data/set-params/setParams';

.table-container {
  .horizontal-divider {
    border-top: 1px solid #e9e9e9;
    height: 1px;
    margin: 16px 0;
  }

  .prompt-message {
    color: #5d637e;
    letter-spacing: 0.86px;
    margin-bottom: 12px;
  }
  /* 行过滤 外层组 包含逻辑符号 */
  .ranks-filter-group {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    width: 100%;

    /* 内层组 同 ranks-filter-group */
    .group-box {
      align-items: center;
      border: 1px solid #e9e9e9;
      border-bottom: 0;
      display: flex;
      padding: 0 5px;
      width: 100%;

      /* 内层 逻辑符号 或 */
      .group-box-left {
        margin-right: 6px;
        text-align: center;
        width: 14px;
      }

      /* 中间条件 select select input */
      .group-box-center {
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: calc(100% - 40px);

        /* 每一条 条件 */
        .filter-item {
          width: 100%;

          .filter-item-box {
            align-items: center;
            display: flex;
            margin: 4px 0;
            width: 100%;

            /* 下拉选择 */
            .filter-select {
              flex-shrink: 0;
              height: 24px;
              margin-right: 4px;
              width: calc(33% - 13px);
            }

            /* 输入框 */
            .filter-input-box {
              flex-shrink: 0;
              height: 24px;
              margin-right: 4px;
              width: calc(33% - 18px);

              .filter-input {
                width: 100%;
              }
            }

            /* 添加删除 按钮 */
            .add-delete-icon {
              margin-left: 6px;
            }
          }
        }
      }

      /* 删除组按钮 */
      .group-box-right {
        align-items: center;
        display: flex;
        margin-left: 6px;
        width: 14px;
      }
    }

    input {
      background-color: transparent;
      border: 1px solid #d2d2d2;
      border-radius: 3px;
      margin-right: 5px;
      outline: none;
      width: 25%;
    }

  }

  /* 添加行过滤 */
  .add-line-filter {
    border: 1px solid #e9e9e9;
    color: #6973ff;
    cursor: pointer;
    height: 32px;
    line-height: 32px;
    text-align: center;
    user-select: none;
    width: 100%;
  }

  /* 列过滤 */
  .column-filter-input {
    background: #f1f1f1;
    border-radius: 4px;
    padding: 8px;

    /* 全选 */
    .all-select {
      margin-bottom: 6px;
    }

    /* 列 checkbox */
    .checkbox-label {
      display: inline-block;
      width: 25%;

      /deep/ .ant-checkbox-wrapper {
        align-items: center;
        display: flex;
        width: 100%;

        >span:last-child {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: calc(100% - 18px);

          .btn {
            display: inline-block;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }
}
/* 没有父节点 */
.no-father-node {
  color: #888;
  font-size: 12px;
  font-style: italic;
  padding: 15px 10px 0;
  text-align: center;

}


</style>
